<template>
  <div>
    <div style="margin-top: 50px">
      <el-row>
        <el-col :span="5">
          <el-row>
            <el-col :span="10" style="text-align:right;padding: 5px 20px;color: #2eb3ff">内容</el-col>
            <el-col :span="14" style="padding-right: 10px">
              <el-input v-model="nr" placeholder="内容" clearable @change="inputChange"></el-input>
            </el-col>
          </el-row>
        </el-col>
        <el-col :span="5">
          <el-row>
            <el-col :span="10" style="text-align:right;padding: 5px 20px;color: #2eb3ff">使用位置</el-col>
            <el-col :span="14" style="padding-right: 10px">
              <el-select v-model="sywz" clearable placeholder="使用位置" @change="inputChange">
                <el-option
                  v-for="item in sywzOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
            </el-col>
          </el-row>
        </el-col>
        <el-col :span="5">
          <el-row>
            <el-col :span="10" style="text-align:right;padding: 5px 20px;color: #2eb3ff">业务类型</el-col>
            <el-col :span="14" style="padding-right: 10px">
              <el-select v-model="ywlx" clearable placeholder="业务类型" @change="inputChange">
                <el-option
                  v-for="item in ywlxOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
            </el-col>
          </el-row>
        </el-col>
        <el-col :span="5">
          <el-row>
            <el-col :span="10" style="text-align:right;padding: 5px 20px;color: #2eb3ff">是否系统</el-col>
            <el-col :span="14" style="padding-right: 10px">
              <el-select v-model="xtcyy" placeholder="是否系统" @change="inputChange">
                <el-option value="全部" label="全部"></el-option>
                <el-option value="是" label="是"></el-option>
                <el-option value="否" label="否"></el-option>
              </el-select>
            </el-col>
          </el-row>
        </el-col>
        <el-col :span="4" style="text-align: center">
          <el-button type="primary" @click="addCyy">添加</el-button>
        </el-col>
      </el-row>
    </div>

    <div style="margin-top: 30px">
      <el-table :data="cyyList.list" border max-height="600" style="width: 100%"
                :header-cell-style="{ textAlign: 'center' }" :cell-style="{ textAlign: 'center' }">
        <el-table-column
          prop="nr"
          label="内容">
        </el-table-column>
        <el-table-column
          prop="sywz"
          label="使用位置">
        </el-table-column>
        <el-table-column
          prop="ywlx"
          label="业务类型">
        </el-table-column>
        <el-table-column
          label="是否系统"
          width="150">
          <template slot-scope="scope">
            <el-tag v-if="scope.row.xtcyy=='是'" type="success">{{ scope.row.xtcyy }}</el-tag>
            <el-tag v-if="scope.row.xtcyy=='否'" type="warning">{{ scope.row.xtcyy }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column
          label="操作"
          width="150">
          <template slot-scope="scope">
            <div v-if="scope.row.xtcyy=='否'">
              <i class="el-icon-edit" style="color: #409EFF;font-size: 17px;cursor: pointer;margin: auto 5px"
                 @click="edit(scope.row)"></i>
              <el-popconfirm
                confirm-button-text='确定' cancel-button-text='不用了'
                icon="el-icon-info" icon-color="red" title="确定要删除这个常用语吗？"
                @confirm="deleteCyy(scope.row)"
              >
                <i slot="reference" class="el-icon-delete"
                   style="color: #F56C6C;font-size: 17px;cursor: pointer;margin: auto 5px;"></i>
              </el-popconfirm>
            </div>
            <div v-else style="cursor: not-allowed">
              <span style="color: #909399">无操作</span>
            </div>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <div style="margin-top: 20px">
      <el-pagination small layout="prev, pager, next, sizes"
                     :total="cyyList.total" :page-size.sync="pageSize" :page-sizes="[1,2,10,20]"
                     :current-page.sync="pageNum"
                     @size-change="inputChange" @current-change="inputChange" @prev-click="inputChange"
                     @next-click="inputChange">
      </el-pagination>
    </div>

    <el-dialog v-dialogDrag :visible="addDialog" :title="title" @close="dialogClose"
               :close-on-click-modal="true" width="40%">
      <el-form ref="addForm" :model="cyy" :rules="addRules" label-width="100px">
        <el-form-item label="内容" prop="nr">
          <el-input v-model="cyy.nr" placeholder="添加常用语"></el-input>
        </el-form-item>
        <el-form-item label="使用位置" prop="sywz">
          <el-select v-model="cyy.sywz" placeholder="使用位置">
            <el-option
              v-for="item in sywzOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="业务类型" prop="ywlx">
          <el-select v-model="cyy.ywlx" placeholder="业务类型">
            <el-option
              v-for="item in ywlxOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submit()" class="pull-right margin-l-25">确定
          </el-button>
          <el-button @click="dialogClose" class="pull-right">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import {
  getOrSearch, saveOrUpdate, deleteCyy
} from "@/api/evaluation/word";
import error from "@/components/pages/Error.vue";
import {getByName} from "@/api/systemManage/selectOptions";

export default {
  name: "commonWord",
  components: {},
  data() {
    return {
      nr: '',
      ywlx: '',
      sywz: '',
      xtcyy: '全部',
      sywzOptions: [

      ],
      ywlxOptions: [

      ],

      pageSize: 10,
      pageNum: 1,
      total: 0,

      cyyList: [],
      selectedCyy: {},

      addDialog: false,
      editDialog: false,

      cyy: {
        nr: '',
        sywz: '',
        ywlx: '',
      },
      title: '',
      successMsg: '',
      addRules: {
        nr: [
          {
            required: true,
            message: "请输入常用语内容",
            trigger: "blur"
          }
        ],
        sywz: [
          {
            required: true,
            message: "请选择使用位置",
            trigger: "blur"
          }
        ],
        ywlx: [
          {
            required: true,
            message: "请选择业务类型",
            trigger: "blur"
          }
        ]
      }
    };
  },
  methods: {
    dialogClose() {
      this.addDialog = false;
      this.editDialog = false;
    },
    // 初始化数据
    get() {
      getOrSearch("type=0&pageNum=" + this.pageNum + "&pageSize=" + this.pageSize).then((res) => {
        this.cyyList = res.data
      })
    },
    // 查询
    search() {
      getOrSearch("type=1&pageNum=" + this.pageNum + "&pageSize=" + this.pageSize
        + "&nr=" + this.nr + "&sywz=" + this.sywz + "&ywlx=" + this.ywlx + "&xtcyy=" + this.xtcyy).then((res) => {
        this.cyyList = res.data
      })
    },
    inputChange() {
      let loadingInstance = this.$loading();
      this.search();
      loadingInstance.close();
    },
    // 编辑
    edit(row) {
      this.title = '编辑常用语';
      this.successMsg = '修改成功！';
      this.cyy = JSON.parse(JSON.stringify(row));
      this.addDialog = true;
      // 初始化表单验证
      this.$refs.addForm.clearValidate()
    },
    // 删除
    deleteCyy(row) {
      let loadingInstance = this.$loading()
      deleteCyy("id=" + row.id).then(
        (res)=>{
          loadingInstance.close()
          this.$message.success("删除成功")
        },
        (error) => {
          loadingInstance.close()
        }
      )
      this.search();
    },
    // 添加
    addCyy() {
      this.cyy = {
        nr: '',
        sywz: '',
        ywlx: '',
      }
      this.title = '添加常用语';
      this.successMsg = '添加成功！';

      this.addDialog = true;
      // 初始化表单验证
      this.$refs.addForm.clearValidate()
    },
    // 获取使用位置
    sywz_ywlx() {
      this.sywz_ywlxDrawer = true;
      getByName("name=使用位置").then(
        (res)=>{
          this.sywzOptions = res.data
        }
      )
      getByName("name=业务类型").then(
        (res)=>{
          this.ywlxOptions = res.data
        }
      )
    },

    // 提交
    submit() {
      this.$refs.addForm.validate((valid) => {
        if (!valid) {
          return;
        } else {
          let loadingInstance = this.$loading()
          saveOrUpdate(this.cyy).then(
            (res) => {
              loadingInstance.close()
              if (res.code == 200) {
                this.$message.success(this.successMsg)
              } else {
                this.$message.error(res.msg)
              }
              this.dialogClose()
              this.search()
            },
            (error) => {
              loadingInstance.close()
            })
        }
      });
    }

  },
  mounted() {
    this.get()
    this.sywz_ywlx()
  },
};
</script>

<style scoped lang="less">

</style>
